<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/js/ztree/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.all-3.5.js"></script>
<title>layout案例</title>
<script type="text/javascript">
	function addTabs(){
		$("#tab").tabs("add",{
			title:'百度',
			closable:true,
			iconCls:'icon-search',
			content:'<iframe frameborder="0" width="100%" height="100%" src="http://www.baidu.com"></iframe>'
		});
	}
</script>
<script type="text/javascript">
	var setting={
		data:{
			simpleData:{
				enable:true
			}
		}
	};
	var zNodes=[{id:'1',pId:'0',name:'父节点1',open:true},
	            {id:'11',pId:'1',name:'父节点2'},
	            {id:'111',pId:'11',name:'子节点1'},
	            {id:'112',pId:'11',name:'子节点2'},
	            {id:'113',pId:'11',name:'子节点3'}
	];
	$(function(){
		alert("1");
		$.fn.zTree.init($("#mytree"),setting,zNodes);	
	}
	);
	
	
	
</script>


</head>
<body class="easyui-layout">   

    <div data-options="region:'north',title:'north'" style="height:100px;"></div>   
    <div data-options="region:'south'" style="height:100px;"></div>   
    <div data-options="region:'east'"  style="width:100px;"></div>   
    <div data-options="region:'west',title:'west'"  style="width:200px;">
 		<div id="accordion" class="easyui-accordion" data-options="fit:true" style="width:300px;height:200px;">   
		    <div title="Title1" 
		    data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">   
		    <a id="linkbaidu" onclick="addTabs()" class="easyui-linkbutton">百度</a>
		    </div>   
		    <div title="Title2" 
		    data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">   
		       <ul id="mytree" class="ztree">
		       
		       </ul>   
		    </div>   
		    <div title="Title3">   
		        内容3    
		    </div>   
		</div>
    </div>   
    <div data-options="region:'center'" style="padding:5px;background:#eee;">
    	<div id="tab" class="easyui-tabs" data-options="fit:true" style="width:500px;height:250px;">   
		    <div title="选项卡1">   
		      	选项卡1 
		    </div>   
		    <div title="选项卡2" data-options="closable:true" style="overflow:auto;padding:20px;">   
		       	 选项卡2     
		    </div>   
		    <div title="选项卡3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;">   
		       	 选项卡3 
		    </div>   
		</div> 
    </div>   
</body> 
</html>